<template>
  <div>
    <div class="page-cell">
      <div class="page-title">Cell Swipe</div>
      <mt-cell-swipe
        v-for="(n,index) in 15"
        :key = "index"
        :right="rightButtons"
        title="swipe me">
      </mt-cell-swipe>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">

  import Vue from 'vue';
  import CellSwipe from 'mint-ui/lib/cell-swipe';
  import 'mint-ui/lib/cell-swipe/style.css';

  Vue.component(CellSwipe.name,CellSwipe)

  export default {
    created() {
      this.rightButtons = [
        {
          content: 'Mark as Unread',
          style: { background: 'lightgray', color: '#fff' }
        },
        {
          content: 'Delete',
          style: { background: 'red', color: '#fff' },
          handler: () => this.$messagebox('delete')
        }
      ];
    },

    methods: {
      leftButtonHandler(evt) {
        console.log(123);
      }
    }
  }
</script>
